<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>闯关</title>
    <link rel="icon" href="img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        #ye1{
            width: 100%;
            height: 100%;
        }
        #ye1Content{
            width: 400px;
            margin: 0 auto;
        }
        #ye2{
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
        }
        #level{
            padding-left: 20px;
            padding-top: 10px;
            width: 200px;
            height: 40px;
            background-color: #009f95;
            color: white;
            font-size: 1.4em;
            float: left;
        }
        #NowQuestionDv{
            position: absolute;
            left: 50%;
            margin-left: -100px;
            margin-top: 40px;
            width: 200px;
            height: 75px;
            border: 1px solid #03a2f3;
            float: left;
            background: rgba(3, 162, 243,0.1);
            border-radius: 25px;
        }
        #NowQuestionDv2{
            width: 200px;
            margin: 10px auto 0;
            text-align: center;
            font-size: 2.5em;
            color: white;
        }
        #lk{
            cursor: pointer;
            padding-top: 15px;
            width: 150px;
            height:35px;
            border-radius: 5px;
            background-color: #009f95;
            color: white;
            float: right;
            text-align: center;
        }


        #ye2Content{
            position: relative;
            width: 100%;
            height: 650px;
            margin: 150px auto 0;
        }

        #QuestionStatusDv{
            margin: 120px 0 0 30px;
            position: absolute;
            width: 40px;
            height: 400px;
        }

        .QuestionStatusSmallDv{
            cursor: pointer;
            border-radius: 100%;
            background-color: #dbd7d7;
            margin:0 auto 10px;
            padding-top: 11px;
            width: 40px;
            height: 29px;
            text-align: center;
            font-size: 1.2em;
        }

        #Question{
            position: relative;
            text-align: center;
            padding-top: 60px;
            background-color: #d7ab7a;
            width: 600px;
            height: 110px;
            margin: 30px auto 30px;
            border-radius: 60px;
        }

        #content{
            position: absolute;
            left: 50%;
            color: white;
            margin-left: -250px;
            width: 500px;
            height: 60px;
            text-align: center;
            line-height : 30px;
            word-wrap: break-word;
            font-size: 1.2em;
        }

        .answers{
            width: 600px;
            height: 450px;
            border: 2px solid black;
            margin: 0 auto;
            background: rgba(255,255,255,0.4);
            border-radius: 40px;
        }

        .answer{
            width: 400px;
            height: 60px;
            margin: 40px auto 0;
        }

        .answerBtn{
            width: 400px;
            height: 60px;
            margin: 0 auto;
        }
        button{
            outline: none;
            border: none;
        }
        .dubtn{
            border-radius:20px;
            background-color: #d7ab7a;
            color: white;
            font-size: 1.5em;
            cursor: pointer;
            margin-top: 20px;
            height: 40px;
        }

        #upOrDown{
            width: 600px;
            margin: 0 auto;
        }


        #coverLayer{
            position: absolute;
            width: 600px;
            height: 450px;
            display: none;
            z-index: 10;
        }



        body{
            background: url("../img/cguan1.jpg");
            background-size:cover;
            margin: 0;
            padding: 0;
        }

        #start{
            background: url("../img/breakO2.png");
            background-size:cover;
        }

        #leave{
            background: url("../img/breakO4.png");
            background-size:cover;
        }
    </style>
</head>


<body>
<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>

<div id="ye1">
    <div id="ye1Content">
        <div id="start" style="height:155px;width: 290px;margin: 250px auto 0;cursor: pointer"></div>
        <div id="leave" style="height:140px;width: 300px;margin: 120px auto 0;cursor: pointer"></div>
    </div>
</div>
<div id="ye2">
    <div id="ye2Top">
        <div id="level">
            <span>当前关卡：</span>
            <span id="thislevel"></span>
            <span>关</span>
        </div>
        <div id="NowQuestionDv">
            <div id="NowQuestionDv2">
                <span>第</span><span id="NowQuestion"></span><span>题</span>
            </div>

        </div>
        <div id="lk">
            <span style="font-size: 1em">中&nbsp;&nbsp;断&nbsp;&nbsp;闯&nbsp;&nbsp;关</span>
        </div>
    </div>
    <div id="ye2Content">
        <div id="QuestionStatusDv">
            <div id="QSDv1" class="QuestionStatusSmallDv">1</div>
            <div id="QSDv2" class="QuestionStatusSmallDv">2</div>
            <div id="QSDv3" class="QuestionStatusSmallDv">3</div>
            <div id="QSDv4" class="QuestionStatusSmallDv">4</div>
            <div id="QSDv5" class="QuestionStatusSmallDv">5</div>
            <div id="QSDv6" class="QuestionStatusSmallDv">6</div>
            <div id="QSDv7" class="QuestionStatusSmallDv">7</div>
            <div id="QSDv8" class="QuestionStatusSmallDv">8</div>
            <div id="QSDv9" class="QuestionStatusSmallDv">9</div>
            <div id="QSDv10" class="QuestionStatusSmallDv">10</div>
        </div>
        <div id="Question">
            <div id="content">
                <span id="questionTitle" style="font-size: 25px;"></span>
            </div>
        </div>

        <div id="answers" class="answers">
            <div id="coverLayer"></div>
            <div id="as1" class="answer">
                <button id="answer1Dv" class="answerBtn dubtn" onclick="answer1()">
                    <span>A.</span>
                    <span id="answer1"></span>
                </button>
            </div>

            <div id="as2" class="answer">
                <button id="answer2Dv" class="answerBtn dubtn" onclick="answer2()">
                    <span>B.</span>
                    <span id="answer2"></span>
                </button>
            </div>

            <div id="as3" class="answer">
                <button id="answer3Dv" class="answerBtn dubtn" onclick="answer3()">
                    <span>C.</span>
                    <span id="answer3"></span>
                </button>
            </div>

            <div id="as4" class="answer">
                <button id="answer4Dv" class="answerBtn dubtn" onclick="answer4()">
                    <span>D.</span>
                    <span id="answer4"></span>
                </button>
            </div>
        </div>

        <div id="upOrDown">
            <button id="shang" class="dubtn" style="width: 150px;">上一题</button>
            <button id="xia" class="dubtn" style="width: 150px;float: right">下一题</button>
        </div>
    </div>
</div>

<script>
    var questionId = null,i = 0,mistake =0;
    var qID =[0,0,0,0,0,0,0,0,0,0],DidAnswer=['','','','','','','','','',''];
    var DidAnswerStatus=['','','','','','','','','',''];
    var userId =sessionStorage.getItem('userId');

    $('#start').click(function () {
        var c1=layer.confirm('是否开始闯关答题', {
                btn: ['确定','取消']
            },function () {
            $('#ye1').css('display','none');
            $('#ye2').css('display','block');
            question();
            layer.close(c1);
            }
            ,function(){
            layer.close(c1);
            });
    })


    $('#leave').click(function () {
        location.href='user_index.html'
    })

    $('#lk').click(function () {
        var c1=layer.confirm('是否离开闯关（进度不会保存）', {
                btn: ['确定','取消']
            },function () {
            layer.close(c1);
            location.href='user_index.html'
            }
            ,function(){
            layer.close(c1);
            });
    })

    $('.QuestionStatusSmallDv').click(function () {
        i=$(this).text()-1;
        xianShi();
    })

    function question(){
        $.ajax({
            url: "/pve-info/getQuestions/"+userId,
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                if (res.msg == '0'){
                    layer.msg('您已经把题库答完了，正在退出闯关模式'
                        ,{time:2500},function(){location.href = 'user_index.html';})
                }
                else {
                     sessionStorage.obj = JSON.stringify(res);
                    xianShi();
                }
            },
        })
    }

    function xianShi() {
        for (let j=1;j<11;j++){
            let k=j-1;
            let ID='#QSDv'+j;
            if (DidAnswer[k]===''){
            }
            else if (DidAnswerStatus[k]==='0'){
                $(ID).css('background-color','#cb6e6e')
            }
            else if (DidAnswerStatus[k]==='1'){
                $(ID).css('background-color','#6dba60')
            }
        }
        let QuestionContents = sessionStorage.obj;
        let res = JSON.parse(QuestionContents);
        if (mistake==5){
            layer.msg('对不起，你已经错了5题，闯关失败,正在退出'
                ,{time:2500},function(){location.href = 'user_index.html';
            })
        }
        if (DidAnswer[i]===''){
            $('#coverLayer').css('display','none')
        }
        else {
            $('#coverLayer').css('display','block')
            layer.msg('这道歉你已经做过了，请继续完成未做的题目')
        }
        sessionStorage.setItem('analysis',res.data[i].analysis);
        $('#NowQuestion').text(i+1);
        $('#questionTitle').text(res.data[i].questionTitle);
        $('.answerBtn').css('background-color','#64ac58')
        if (DidAnswer[i]==='A'){$('#answer1Dv').css('background-color','red')}
        else if (DidAnswer[i]==='B'){$('#answer2Dv').css('background-color','red')}
        else if (DidAnswer[i]==='C'){$('#answer3Dv').css('background-color','red')}
        else if (DidAnswer[i]==='D'){$('#answer4Dv').css('background-color','red')}
        $('#answer1').text(res.data[i].answer1);
        $('#answer2').text(res.data[i].answer2);
        $('#answer3').text(res.data[i].answer3);
        $('#answer4').text(res.data[i].answer4);
        $('#thislevel').text(res.data[i].nowLevel);
        questionId = res.data[i].id;
    }

    function panDuan(res) {
        qID[i]=questionId;
        if (res.msg == '0'){
            DidAnswerStatus[i]='0';
            var confirm1= layer.confirm('很遗憾，回答错误，正确答案是'+res.data
                ,{time:200000,btn: ['查看解析','直接开始下一题']}
                ,function () {
                    layer.close(confirm1);
                    var confirm2=layer.confirm(sessionStorage.getItem('analysis'),{time:200000,btn:['继续下一题','中断答题']}
                        ,function () {
                            layer.close(confirm2);
                            if (i==9){
                                $.ajax({
                                    url: "/pve-info/pass",
                                    method: 'POST',
                                    contentType: 'application/json',
                                    data:JSON.stringify({
                                        userId:userId,
                                        questionId:qID
                                    }),
                                    success: function(res) {
                                        if (res.code=='400'){
                                            layer.msg(res.msg)
                                        }
                                        else if (res.code==200){
                                            layer.confirm(res.msg,{time:20000000,btn:['继续一关','终止闯关']}
                                                ,function(){
                                                    location.href = 'breakThrough.html';
                                                }
                                                ,function(){
                                                    location.href = 'user_index.html';
                                                })
                                        }
                                    },
                                })
                            }
                            else {
                                mistake = mistake+1;
                                i=i+1;
                                xianShi();
                            }
                        }
                        ,function () {
                            location.href = 'user_index.html';
                        })
                }
                ,function () {
                    layer.close(confirm1);
                    if (i==9){
                        $.ajax({
                            url: "/pve-info/pass",
                            method: 'POST',
                            contentType: 'application/json',
                            data:JSON.stringify({
                                userId:userId,
                                questionId:qID
                            }),
                            success: function(res) {
                                if (res.code=='400'){
                                    layer.msg(res.msg)
                                }
                                else if (res.code==200){
                                    layer.confirm(res.msg,{time:20000000,btn:['继续一关','终止闯关']}
                                        ,function(){
                                            location.href = 'breakThrough.html';
                                        }
                                        ,function(){
                                            location.href = 'user_index.html';
                                        })
                                }
                            },
                        })
                    }
                    else {
                        mistake = mistake+1;
                        i=i+1;
                        xianShi();
                    }
                });
        }
        else if (res.msg == '1'){
            DidAnswerStatus[i]='1';
            var confirm3 =layer.confirm('恭喜你答对了',{time:200000,btn: ['查看解析','直接开始下一题']}
                ,function () {
                    layer.close(confirm3);
                    var confirm4=layer.confirm(sessionStorage.getItem('analysis'),{time:200000,btn:['继续下一题','中断答题']}
                        ,function () {
                            layer.close(confirm4);
                            if (i==9){
                                $.ajax({
                                    url: "/pve-info/pass",
                                    method: 'POST',
                                    contentType: 'application/json',
                                    data:JSON.stringify({
                                        userId:userId,
                                        questionId:qID
                                    }),
                                    success: function(res) {
                                        if (res.code=='400'){
                                            layer.msg(res.msg)
                                        }
                                        else if (res.code==200){
                                           layer.confirm(res.msg,{time:20000000,btn:['继续一关','终止闯关']}
                                                ,function(){
                                                    location.href = 'breakThrough.html';
                                                }
                                                ,function(){
                                                    location.href = 'user_index.html';
                                                })
                                        }
                                    },
                                })
                            }
                            else {
                                i=i+1;
                                xianShi();
                            }
                        }
                        ,function () {
                            location.href = 'user_index.html';
                        })
                }
                ,function () {
                    layer.close(confirm3);
                    if (i==9){
                        $.ajax({
                            url: "/pve-info/pass",
                            method: 'POST',
                            contentType: 'application/json',
                            data:JSON.stringify({
                                userId:userId,
                                questionId:qID
                            }),
                            success: function(res) {
                                if (res.code==400){layer.msg(res.msg)}
                                else {
                                    layer.msg(res.msg,{time:20000000,btn:['继续一关','终止闯关']}
                                        ,function(){
                                            location.href = 'breakThrough.html';
                                        }
                                        ,function(){
                                            location.href = 'user_index.html';
                                        })
                                }
                            },
                        })
                    }
                    else {
                        i=i+1;
                        xianShi();
                    }
                });
        }

    }

    function answer1() {
        DidAnswer[i]='A';
        $.ajax({
             url: "/pve-info/trueOrFalse"
            ,method: 'POST'
            ,contentType: 'application/json'
            ,data:JSON.stringify({
                userId : sessionStorage.getItem('userId'),
                questionId : questionId,
                answer : 'A',
            })
            ,success: function(res) {
                 panDuan(res);
            }
        })
    }
    function answer2() {
        DidAnswer[i]='B';
        $.ajax({
            url: "/pve-info/trueOrFalse"
            ,method: 'POST'
            ,contentType: 'application/json'
            ,data:JSON.stringify({
                userId : sessionStorage.getItem('userId'),
                questionId : questionId,
                answer : 'B',
            })
            ,success: function(res) {
                panDuan(res);
            }
        })
    }
    function answer3() {
        DidAnswer[i]='C';
        $.ajax({
            url: "/pve-info/trueOrFalse"
            ,method: 'POST'
            ,contentType: 'application/json'
            ,data:JSON.stringify({
                userId : sessionStorage.getItem('userId'),
                questionId : questionId,
                answer : 'C',
            })
            ,success: function(res) {
                panDuan(res);
            }
        })
    }
    function answer4() {
        DidAnswer[i]='D';
        $.ajax({
            url: "/pve-info/trueOrFalse"
            ,method: 'POST'
            ,contentType: 'application/json'
            ,data:JSON.stringify({
                userId : sessionStorage.getItem('userId'),
                questionId : questionId,
                answer : 'D',
            })
            ,success: function(res) {
                panDuan(res);
            }
        })
    }

    $('#shang').click(function () {
        if (i==0){
            layer.msg('没有更上一题了')
            xianShi();
        }
        else {
            i =i-1;
            xianShi();
        }
    })
    $('#xia').click(function () {
        if (i==9){
            layer.msg('已经是最后一题了')
            xianShi();
        }
        else {
            i =i+1;
            xianShi();
        }
    })
</script>

</body>
</html>